<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Book List</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/common.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/book-list.css"> <!-- 引用外部CSS文件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/asserts/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 引入header.jsp -->
<%@ include file="/asserts/common/header.jsp" %>
<div class="container">
    <h2 class="text-center">Books List</h2>

    <!-- 左上角：类别选择 -->
    <div class="row">
        <div class="col-md-6">
            <form action="category" method="get" class="form-inline">
                <label for="category" class="mr-2">Category:</label>
                <!-- 固定类别选项 -->
                <select name="categoryName" id="category" class="form-control">
                    <option value="">All</option>
                    <option value="Literature" <c:if test="${categoryName == 'Literature'}">selected</c:if>>Literature</option>
                    <option value="History" <c:if test="${categoryName == 'History'}">selected</c:if>>History</option>
                    <option value="Science" <c:if test="${categoryName == 'Science'}">selected</c:if>>Science</option>
                    <option value="Fantasy" <c:if test="${categoryName == 'Fantasy'}">selected</c:if>>Fantasy</option>
                    <option value="Other" <c:if test="${categoryName == 'Other'}">selected</c:if>>Other</option>
                </select>
                <button type="submit" class="btn btn-primary ml-2">Show</button>
            </form>
        </div>

        <!-- 右上角：搜索 -->
        <div class="col-md-6 text-right">
            <form action="search" method="get" class="form-inline">
                <label for="query" class="mr-2">Search:</label>
                <input type="text" id="query" name="query" class="form-control"
                       placeholder="Search by Title or Author"
                       value="${query}" /> <!-- 显示输入的搜索词 -->
                <button type="submit" class="btn btn-primary ml-2">Search</button>
            </form>
        </div>

    </div>

    <!-- 分类展示 -->
    <c:if test="${not empty categoryName}">
        <h3>Books in Category: ${categoryName}</h3>
    </c:if>

    <c:if test="${empty categoryName}">
        <h3>All Books</h3>
    </c:if>
    <c:if test="${not empty message}">
        <div class="alert alert-info">${message}</div>
    </c:if>
    <!-- 图书列表（使用新的布局，每本书展示为一行） -->
    <div class="book-list">
        <c:forEach var="book" items="${books}">
            <<div class="book-item">
            <!-- 书的图片 -->
            <img src="${pageContext.request.contextPath}/asserts/images/book${book.id}.jpg"
                 onerror="this.onerror=null; this.src='${pageContext.request.contextPath}/asserts/images/book0.jpg';"
                 alt="${book.title}" class="book-image" />
            <!-- 书的信息 -->
            <div class="book-info">
                <h4>${book.title}</h4>
                <p><strong>Author:</strong> ${book.author}</p>
                <p><strong>Category:</strong> ${book.category}</p>
                <p><strong>Publisher:</strong> ${book.publisher}</p>
                <p><strong>Total Copies:</strong> ${book.totalCopies}</p>
                <p><strong>Available Copies:</strong> ${book.availableCopies}</p>
                <!-- 借阅车按钮 -->
                <div class="book-action">
                    <form action="<c:url value="/borrowCart"/>" method="post">
                        <input type="hidden" name="bookId" value="${book.id}" />
                        <button type="submit" class="btn btn-success">Add to Cart</button>
                    </form>
                </div>
            </div>
            </div>

        </c:forEach>
    </div>
    <!-- 分页功能 -->
    <div class="pagination">
        <!-- 显示上一页 -->
        <c:if test="${currentPage > 1}">
            <a href="?page=${currentPage - 1}" class="btn btn-primary">Previous</a>
        </c:if>
        <!-- 显示当前页码 -->
        <span>Page ${currentPage} of ${totalPages}</span>
        <!-- 显示下一页 -->
        <c:if test="${currentPage < totalPages}">
            <a href="?page=${currentPage + 1}" class="btn btn-primary">Next</a>
        </c:if>
    </div>

</div>

<!-- 引入footer.jsp -->
<%@ include file="/asserts/common/footer.jsp" %>
</body>
</html>